per passare alla linea successiva e inserire una linea vuota. Come creare un link? Il formato del tag per definire un link all'interno del proprio documento consiste in ...testo... Il risultato Φ che nel documento il ...testo... verrα sottolineato (o evidenziato in qualunque modo il vostro browser usi per indicare un link) e, se selezionato, provocherα il passaggio al documento indicato da ...URL... Per specificare un link locale cioΦ che punti ad un'altra sezione dello stesso documento, si deve inventare un'etichetta (un nome) per la sezione: usare subito prima della sezione usare ...testo... per creare un rimando alla sezione Ad esempio, Sezione 1 ... Questa e` la sezione 1 farα s∞ che, dove Φ stato specificato il primo link compaia "Sezione 1" evidenziato; e se quest'ultimo viene selezionato, il risultato sarα un bel salto al testo che segue "Sez1". Attenzione: potete tranquillamente usare un HREF="#nome" anche se il corrispondente NAME="nome" Φ pi∙ avanti nel documento (come di fatto Φ nell'esempio). L'unico problema consiste nel fatto che, con un browser multithreaded, se l'utente seleziona l'link locale prima che sia stato caricata la parte di documento dove c'Φ l'link NAME, il browser non saprα dove saltare, e i risultati (come diceva il buon vecchio K&R) non saranno predicibili. Come inserire una linea? Il tag Φ

. Come colorare lo sfondo? Basta aggiungere la proprietα BGCOLOR al tag come in . Come mettere un'immagine come sfondo? Si usa nel tag BODY la proprietα BACKGROUND="...url...", dove url sta per l'URL di un immagine riconosciuta dal browser (solitamente, GIF o JPG). Un esempio? eccolo: Immagini? Il tag per inserire un'immagine ha il formato I formati di immagine riconosciuti dipendono dal browser: in generale, GIF Φ un formato accettato sia da client Unix che da client DOS. E` utile specificare anche cosa fare se chi legge la pagina non ha a disposizione un browser grafico ma solo i caratteri: si fa aggungendo ALT="...xxx...", con un messaggio del tipo QUI CI SAREBBE UN'IMMAGINE o quello che volete al posto delle xxx. Infine, Φ utile saper posizionare il testo vicino ad un'immagine. Si usa la proprietα di ALIGN="..." con LEFT, MIDDLE, RIGHT al posto dei puntini. Se usate LEFT o RIGHT, il testo scorrerα di fianco all'immagine Ad esempio, . Liste? HTML permette di specificare diversi tipi di liste: in generale c'Φ un tag di "apertura lista", uno di "chiusura lista" e uno o pi∙ per indicare un "elemento di lista": Liste semplici Si aprono con

e si chiude con

Un elemento di lista si specifica con

• Elemento A
• Elemento B

Liste numerate Come sopra, tranne che i tag sono

e

. Liste di definizioni Si apre con

e si chiude con

, e per specificare gli elementi della lista ci sono due tag:

che indica l'oggetto definito, e

che indica la definizione. Cos∞

Aereoplano

Oggetto che vola

Automobile

Oggetto che non vola (tranne le GolfGTI16V dopo la discoteca)

Incorniciamoci... ============================================== I frames permettono di suddividere lo spazio nel browser dove normalmente Φ contenuta una pagina in pi∙ sottospazi, ciascuno indipendente dagli altri; ciascun frame pu≥ contenere una pagina html differente: cos∞, in una striscia in alto si pu≥ caricare una pagina contenente un logo, e in un frame laterale mettere una toolbar o dei link per muoversi velocemente, mentre la parte centrale contiene i dati veri e propri. In un file html separato si definiscono dettagliatamente i frames, mediante dei tags opportuni; un frame Φ definito da I significati dovrebbero essere ovvi: scrolling pu≥ valere yes, no o auto e controlla la presenza della barra di scorrimento, name serve per dare un nome al frame (per potercisi riferire, come vedremo subito), gli altri due elementi danno le dimensioni dei margini; volendo, si pu≥ aggiungere il tag noresize che impedisce al lettore di ridimensionare il frame. La proprietα src indica qual'Φ il documento da caricare inizialmente nel frame. Tutte le definizioni devono essere racchiuse in una coppia di tags ... che servono a definire quanta parte dello spazio disponibile vada assegnato a ciascun frame: qui, ad esempio, si indica che il primo frame avrα il 10% di spazio, il secondo il 30%, e il terzo tutto lo spazio rimanente (*). Resta solo da vedere come si fα ad indicare che un particolare documento sia caricato in un dato frame, quando viene selezionato un link. Per fare questo, c'Φ una proprietα per il tag , ovvero la proprietα target="nomeframe"; ad esempio: questo indica semplicemente che, quando viene selezionato un link, la pagina corrispondente verrα caricata nel frame chiamato frame1. ... con tabelle ============================================== Una caratteristica interessante introdotta dalla specifica 3.0 di HTML Φ quella di permettere la costruzione di tabelle, come sempre attraverso tags opportuni. Per definire una tabella, si usa la coppia di tag ... border Φ opzionale: indica la presenza o meno di una cornice (e la sua dimensione mediante la notazione border="xx"). width e height specificano larghezza ed altezza della tabella, mentre valign l'allineamento di default per le singole celle. Una riga si specifica mediante i tags "table row" ... che, a loro volta, racchiudono i singoli dati, specificati con dato Un esempio: la specifica

Tabella di test

Ciao

a

tutti

voi! Come vedete, Φ possibile tranquillamente ignorare i tag di chiusura, e il modificatore align pu≥ essere associato a ciascun dato per definirne la centratura. Infine, vediamo come Φ possibile ottenere celle che "spazino" su pi∙ linee o colonne: si fa usando per tag un modificatore colspan="xx" oppure rowspan="xx"; per esempio, Tabella di test 2 Ciao a tutti Forms ed interazione ============================================== E veniamo ad un punto dolente. Tutte le belle cose descritte sopra aiutano a costruire una pagina che contiene informazioni che possano essere lette. Ma come fare se si vuole che il lettore possa anche fornire informazioni, oltre che leggerle? La risposta, in una parola, si chiama forms. Dato che una parola sola Φ un po' poco, mi spiegher≥ meglio. Andiamo ad incominciare. L'idea Φ piuttosto semplice. Per prima cosa, nella pagina si specificano, attraverso opportuni tags, delle zone di input, in cui chi accede alla pagina potrα scrivere, o comunque interagire: i form, quindi, specificano sia zone di input alfanumerico (il lettore scrive quello che vuole, magari un bel complimento per la foto che avete digitalizzato con due ore di lavoro), di scelta guidata (tipicamente, una lista di possibilitα), oppure di input univoci (un bottone di OK, per esempio, o dei radio button). Quando un utente capita in una pagina con un form, probabilmente vorrα inserirvi dei dati (altrimenti state leggendo per niente... :^) ); in particolare, uno dei form Φ di solito un bottone che manda al client il messaggio "Ok, ho finito". Quando il client riceve questo messaggio, prende tutto ci≥ che l'utente ha scritto o selezionato, impacchetta questi dati con un formato preciso, e li spedisce al server. A questo punto, il server che ci fa? Dato che la vostra pagina potrebbe servire a comunicare ricette di cucina marziane oppure i saluti alla nonna, Φ chiaro che non pu≥ essere il server ad elaborare i dati. Quindi, il server a sua volta passa i dati ad un altro programma (che voi avete scritto) che li mastica, li digerisce, e poi specifica un documento (html) di risposta, che viene inviato al client, che lo mostra. Questo programma si chiama query-server in quanto serve le richieste relativa ad una specifica serie di form. La specifica di quale queryserver utilizzare per masticare ecc... i dati viene fornita nello stesso tag con cui si dichiara il form. Esempio pratico e chiarificatore (speriamo): supponiamo che la pagina di Pinco Pallino contenga un form che permette di scrivere un messaggio: l'utente scrive, poi "schiaccia" il pulsante "send"; il client guarda nella pagina, scopre che queryserver va utilizzato, e manda al server web i dati pi∙ quest'ultima informazione; il server web chiama il queryserver, passandogli i dati; il queryserver aggiunge l'header SMTP (quello delle mail, per intenderci) e chiama il programma di posta; poi genera una pagina temporanea con dentro scritto "Complimenti! Il tuo messaggio Φ stato spedito a Pinco Pallino!", la manda al client che la visualizza. Niente di cos∞ difficile, vero? Questo Φ quanto. Rimangono solo due problemi da chiarire: come si scrive un queryserver adatto ai dati eccezionali che arriveranno da chi legge la nostra pagina (e dove lo si deve mettere), e poi vedere quali sono i tags in gioco. CGI&c ============================================== "Query-server", come dovrebbe ormai essere chiaro, Φ solo un nome altisonante per un programma che accetta dei dati in un formato specifico, fa qualcosa, e poi rimanda indietro un documento di risposta. Questo programma si pu≥ scrivere in molti linguaggi diversi, da C, a Perl, oppure come script di shell. Le specifiche di come interfacciare il proprio programma, scritto nel linguaggio prediletto, con il server web (ovvero: come accettare i dati, come "spacchettarli", come rispondere) costiuiscono la cosiddetta CGI (Common Gateway Interface). In pratica, per il C, si tratterα di linkare una libreria che contiene delle funzioni apposite; per gli script di shell, di leggere il contenuto di alcune variabili di environment; ecc. Dato che fornire le specifiche precise Φ davvero troppo lungo, potete direttamente riferivi alla pagina apposita all'NCSA. Ci sono anche numerosi esempi di query server giα pronti all'uso. I tags ============================================== Ecco alcuni tags per dichiarare i form pi∙ comuni. Questi tags potrebbero essere istanziati in modo differente da browser a browser. Il tag FORM permette di dichiarare un form. Il formato Φ: ...altri tags e testo vario... Ogni zona interattiva all'interno della vostra pagina verrα specificata da una coppia ... <\FORM>. Altri tags servono per definire che tipo di form sarα. ACTION specifica il queryserver da utilizzare. L'attributo METHOD pu≥ valere "GET" o "POST". In breve, con GET i dati vengono inviati al queryserver sulla "linea di comando", mentre con POST vengono inviati separatamente come pacchetto dati. Per input brevi, GET va bene, ma se la riga di comando supera un certo numero di caratteri viene troncata, quindi POST Φ pi∙ sicuro. I tag FORM non si possono innestare (anche se ce ne possono essere tanti nello stesso documento...) Come specificare una lista di opzioni? All'interno di un tag FORM, con: Opzione 1 Opzione 2 ... Opzione n Come specificare una linea di input libero, bottoni, radio button, checkboxes, ecc? All'interno di un tag FORM, con: TYPE="...tipo..." NAME="...nome..." VALUE="...valore..." CHECKED SIZE=larghezza,altezza MAXLENGHT=n> Il tipo pu≥ essere uno tra "text", "checkbox", "radio", "submit", "reset". Ovvimente, gli attributi vanno usati con buon senso: CHECKED ha senso solo se si specifica "checkbox" o "radio" come tipo, ecc. NAME (dev'esserci per tutti tranne "submit" e "reset") indica il nome simbolico con cui il contenuto dell'input sarα indicato quando i dati saranno passati al queryserver. VALUE specifica il valore per default o l'etichetta di un bottone. Un tag di tipo "submit" deve esserci perchΦ Φ il solo mezzo per permettere all'utente di dire al suo client "ho finito". Come specificare un'area di input grande? ...contenuto... Cosa sono Java e HotJava? ============================================== Java Φ un linguaggio di programmazione simile al C++, e HotJava Φ un browser WWW (scritto, guarda caso, in Java) che permette, in soldoni, di vedere dei programmi integrati (scritti in Java,C o C++), detti applet, all'interno di pagine web. Conclusioni ============================================== Questo e' per ora tutto. Provate e riprovate e vedrete che qualcosa saltera' fuori. Un trucco per imparare e' questo: se vedete qualcosa che vi piace in un dato documento ma non sapete come si fa, usate l'opzione "VIEW SOURCE" che vi mostra il file html completo di tags. Al limite salvatelo e poi editatelo e correggetelo. Riferimento rapido ai tag pi∙ comuni ============================================== Questa appendice costituisce un riferimento rapido ai pi∙ conosciuti tag del linguaggio HTML; tutte le voci sono organizzate in ordine alfabetico. I tag contenuti in questa appendice riguardano le versioni HTML dalla 1.0 alla 3.0, e sono inclusi anche tutti i nuovi tag di Netscape, fra i quali quelli proposti per HTML 3.0. Tutti i tag elencati in questa appendice funzionano con il browser Netscape 1.1N e successivi. Ecco la lista in ordine alfabetico: Fornisce all'autore HTML un meccanismo per inserire dei commenti, analogo a REM in BASIC o / * e */ in C, e cos∞ via. I commenti vengono ingorati dal parser HTML, e il testo pu≥ continuare su pi∙ righe. Adress Text Fornisce dettagli sull'autore del documento corrente, di solito l'indirizzo e-mail. LinkText Crea un iper-riferimento a un'altra risorsa Internet. URL pu≥ riferirsi a un file HTML locale (per esempio: file:myfile.htm), a un server remoto, come Gopher (per esempio gopher://info.brad.ac.uk), oppure a un'immagine o a un audio clip per il quale Netscape possiede un'helper application. Word Crea un link per la stringa Word all'interno di un documento. Il tag viene utilizzato per indicizzare il link. Per esempio, il tag Click here creerebbe un'iperconnessione al tag con il nome "mytag", portando quindi l'utente a tale voce. Se la voce "ancorata" si trovasse in un altro documento, la forma del tag verrebbe modificata in: Click here, dove document.htm sarebbe il documento remoto in questione e linkname il nome del tag nel documento remoto. Boldtext Formatta in grassetto il testo Boldtext. Si vedano anche . . Quote text Inserisce una porzione di testo che costituisce una citazione da un'altra fonte (per esempio da un discorso). Non vengono inserite delle virgolette (") prima e dopo Quotetext, e il testo pu≥ continuare su pi∙ righe. Utilizzato per specificare il vero e proprio corpo (Bodytext) o parte del documento HTML che contiene tutto il testo, con i relativi tag, che sarα effettivamente visualizzato sullo schermo dell'utente (a differenza dell'intestazione del documento, che contiene tag come Inserisce un titolo sulla schermata, che informa l'utente a proposito del documento visualizzato. PrefText Inserisce del testo preformattato (o testo teletype) in caratteri a spazio fisso. Si vedano anche , . Item-name Inserisce una serie di elementi puntati. La nuova parola chiave type permette di modificare il tipo di punti. ╚ necessario utilizzare tanti tag quanti sono gli elementi dell'elenco, ed Φ possibile anche nidificare gli elenchi all'interno di altri elenchi.